在React中 style & 幾種CSS的撰寫方式 - Day16 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 16

Modern Web

現在就學React.js 系列第 16 篇

在React中 style & 幾種CSS的撰寫方式 - Day16

16th鐵人賽

鯨魚

2024-09-30 18:51:00

151 瀏覽

分享至

在 React 中撰寫 CSS 的幾個方式

在 React 中有很多種方式可以寫 CSS，將介紹幾種常見的 CSS 撰寫方式，包括外部引入 CSS 檔案、CSS Modules、Inline Styles、Styled Components 等方式。

1. 外部引入 CSS 檔案

最基本且常見的方式是在外部撰寫 CSS 檔案，再 React 元件中引入這些檔案。

用 CRA 創建的初始化 React 專案時，就會看到 App.css 檔案，它就是用外部方式引入到 App.js 中。

在這種方式中，由於我們是寫在 JSX 上，class 是 JS 的保留字無法使用，加上的 class，需要改為 className。因此，也可以透過三元運算子的方式，來做動態的新增或移除 class

<p className={isShow ? 'textTitle' : '' }>Hello World! </p>

用外部引入的方式，會出現個問題，所有引入的樣式，都是全局作用域，會造成可能的潛在問題－樣式覆蓋的問題。我們來看下方的範例：

假設有兩個組件 `Header.js` 和 `Footer.js`：

Header.js


import React from 'react';
import './Header.css'; 

const Header = () => {
  return (
    <header className="title">
      This is the Header
    </header>
  );
};

export default Header;

Header.css

.title {
  font-size: 24px;
  color: red;
}

Footer.js


import React from 'react';
import './Footer.css'; 

const Footer = () => {
  return (
    <footer className="title">
      This is the Footer
    </footer>
  );
};

export default Footer;

Footer.css

.title {
  font-size: 18px;
  color: blue;
}

最後出現的畫面是

文字顏色竟然全部都變成是紅色！主要是樣式被覆蓋掉了！CSS在相同的權重下，後面會覆蓋上前面的內容，Header 和 Footer 都使用了同一個類名 title。當這些組件一起使用時，CSS 規則會相互覆蓋，可能導致 Header 和 Footer 的樣式混亂，例如 Header 顯示紅色，而不是藍色。那遇到這樣的問題，可以如何解決呢？用 CSS Modules！

2. CSS Modules

CSS Modules 是一種解決全局作用域問題的方式。它允許我們將 CSS 限定在特定的組件內，避免樣式衝突。

CSS Modules帶來的好處是：

解決了全局作用域的問題，讓樣式局部化。
方便組件化開發，樣式更具可維護性。

將上述的範例檔案調整一下，把 css 檔案，前面加上module 後，再引入時加上 style 。

Header.module.css


.title {
  font-size: 24px;
  color: red;
}

Footer.module.css


.title {
  font-size: 18px;
  color: blue;
}

Header.js

import React from 'react';
import styles from './Header.module.css';  // 使用 CSS Modules

const Header = () => {
  return (
    <header className={styles.title}>
      This is the Header
    </header>
  );
};

export default Header;

Footer.js

import React from 'react';
import styles from './Footer.module.css';  // 使用 CSS Modules

const Footer = () => {
  return (
    <footer className={styles.title}>
      This is the Footer
    </footer>
  );
};

export default Footer;

會發現這樣做之後，樣式都變得正確了！ css 檔案加上module後，會在編譯後讓 class 的名稱變得不同。因此就算取相同命名的 class ，就不用擔心會有覆蓋的問題了。

3. Inline Styles

Inline Styles 是將樣式直接寫在 JSX 元素的 style 屬性中，以物件的形式呈現。每個 CSS 屬性都以駝峰式命名，如 backgroundColor，而不是傳統的 background-color。

簡易範例：

import React from 'react';

function App() {

  const containerStyle = {
    textAlign: 'center',
    padding: '20px',
    backgroundColor: '#f0f0f0',
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333',
  };

  const linkStyle = {
    color: '#61dafb',
    textDecoration: 'none',
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, World!</h1>
      <a
        style={linkStyle}
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </div>
  );
}

export default App;

Inline Styles 的優勢

簡單直接：將樣式與 JSX 元素綁定在一起，適合快速開發或處理局部樣式。
動態修改：由於樣式是以物件形式，可以根據狀態或參數動態改變樣式內容。

Inline Styles 的缺點

無法使用 CSS 偽類與偽元素：無法直接使用像:hover、:before 等 CSS 偽類與偽元素以及media-query ****，這會限制部分互動效果以及響應式的設計。
難以重用：當需要在多個元件中使用相同的樣式時，Inline Styles 會導致樣式重複並變得冗長，這與外部 CSS 檔案相比不具備可重用性。

4. Styled Components

Styled Components 是 React 中非常流行的 CSS-in-JS 。它允許我們將 CSS 直接撰寫在 JavaScript 中，並且將樣式綁定到 React 組件上，使開發過程更加模組化和直觀。

為什麼使用 Styled Components？

模組化管理樣式：每個組件的樣式是獨立的，避免全局樣式污染與衝突。
支援動態樣式：能夠根據組件的屬性動態地改變樣式。
增強 React 開發體驗：CSS 與 JavaScript 可以無縫整合，提供更靈活的樣式控制。

開始使用 Styled Components

安裝 Styled Components

首先，我們需要安裝 styled-components 套件。


npm install styled-components

這會將 styled-components 加入到你的專案中，準備好後我們可以在組件內開始使用它。

使用 Styled Components 定義樣式

下面是一個簡單範例，展示如何在 React 中使用 Styled Components 定義和應用樣式。


import React from 'react';
import styled from 'styled-components';

// 定義容器樣式
const Container = styled.div`
  padding: 20px;
  background-color: #f0f0f0;
`;

// 定義標題樣式
const Title = styled.h1`
  font-size: 24px;
  color: #333;
`;

// 應用樣式於 React 組件
const App = () => {
  return (
    <Container>
      <Title>Hello, World!</Title>
    </Container>
  );
};

export default App;

畫面出來後是這樣

會發現樣式名稱，它會自動生成唯一的命名class名稱，也就不用擔心會有覆蓋的問題！

動態樣式

除了靜態樣式，Styled Components 也支援動態樣式，能根據組件屬性來改變外觀：


const Button = styled.button`
  background-color: ${props => (props.primary ? '#4CAF50' : '#f0f0f0')};
  color: ${props => (props.primary ? 'white' : 'black')};
  padding: 10px 20px;
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
};

在這個範例中，Button 組件的樣式會根據 primary 屬性的值動態改變。當 primary 為真時，按鈕會呈現綠色背景，否則會是預設的灰色背景。